<template>
	<div class="loginIndex">
		<vue-particles
			color="#fff"
			:particleOpacity="0.7"
			:particlesNumber="60"
			shapeType="circle"
			:particleSize="4"
			linesColor="#fff"
			:linesWidth="1"
			:lineLinked="true"
			:lineOpacity="0.4"
			:linesDistance="150"
			:moveSpeed="2"
			:hoverEffect="true"
			hoverMode="grab"
			:clickEffect="true"
			clickMode="push"
			class="lizi"
		>
		</vue-particles>
		<div class="login_box">
			<!-- 网站名称 -->
			<div class="login_title">
				<h2>蘑菇博客后台管理系统</h2>
			</div>
			<!-- 登录表单 -->
			<el-form
				:model="loginForm"
				label-width="0px"
				class="login_form"
				ref="LoginForms"
				:rules="rules"
			>
				<!-- 用户名 -->
				<el-form-item prop="username">
					<el-input
						v-model="loginForm.username"
						prefix-icon="iconfont icon-user"
					>
						<i
							slot="prefix"
							class="el-input__icon el-icon-user"
						></i>
					</el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input
						type="password"
						v-model="loginForm.password"
						prefix-icon="iconfont icon-3702mima"
						show-password
					>
						<i
							slot="prefix"
							class="el-input__icon el-icon-lock"
						></i>
					</el-input>
				</el-form-item>
				<!-- 按钮 -->
				<el-form-item class="btns">
					<el-button type="primary" @click="loginSubmit"
						>登录</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { Login } from '../../api/authority'
export default {
	name: 'loginIndex',
	data() {
		return {
			// 表单数据
			loginForm: {
				username: 'admin',
				password: '123456',
			},
			rules: {
				username: [
					{ required: true, message: '请输 入姓名', trigger: 'blur' },
					{
						min: 3,
						max: 15,
						message: '长度在 3 到 15 个字符',
						trigger: 'blur',
					},
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{
						min: 6,
						max: 15,
						message: '长度在 6 到 15 个字符',
						trigger: 'blur',
					},
				],
			},
		}
	},
	methods: {
		//   登录按钮
		loginSubmit() {
			this.$refs.LoginForms.validate(async (a, b) => {
				if (!a) return this.$message.error('输入格式错误，请重新输入')
				// console.log(this.loginForm.username, this.loginForm.password);

				const { data: res } = await Login({
					username: this.loginForm.username,
					password: this.loginForm.password,
				})
				this.$store.commit('setUser', res.data)
				// console.log(res)
				if (res.code !== 'success') return this.$message.error(res.data)
				this.$router.push('/')
			})
		},
	},
}
</script>

<style lang="less" scoped>
.loginIndex {
	background-color: #2d3a4b;
	.login_box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 350px;
		height: 300px;
		// background-color: red;
		text-align: center;
		color: #fff;
	}
	/deep/ .el-input {
		.el-input__inner {
			color: #fff;
			background-color: #283443;
			border: 1px solid #283443;
		}
	}

	.el-button {
		width: 100%;
	}
}
</style>
